<template>
  <Crumbs
    :crumbName="[
      {
        route: '',
        name: '宠物发布管理',
      },
    ]"
  />
  <a-card style="min-height: 90%">
    <div class="query border">
      <a-row>
        <a-col :span="12">
          <a-row>
            <a-col :span="5" class="right">
              <span>审核查询：</span>
            </a-col>
            <a-col :span="19">
              <a-select
                style="width: 200px"
                v-model:value="pet_release_status"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
              >
                <a-select-option value="all">全部</a-select-option>
                <a-select-option value="null">未审核</a-select-option>
                <a-select-option value="true">已通过</a-select-option>
                <a-select-option value="false">未通过</a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="8">
          <a-row>
            <a-col :span="6">
              <a-button type="primary" @click="handleQueryPet">查询</a-button>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="table border">
      <a-page-header title="数据列表"></a-page-header>
      <a-table
        bordered
        :columns="columns"
        :data-source="data"
        :scroll="{ x: 2000 }"
        :pagination="tablePagination"
        @change="tablePageChange"
        rowKey="id"
      >
        <template #gender="{ record }">
          <a-tag color="pink" v-if="record.pet_gender == '0'">雌</a-tag>
          <a-tag color="blue" v-if="record.pet_gender == '1'">雄</a-tag>
        </template>
        <template #vaccin="{ record }">
          <a-tag color="green" v-if="record.pet_vaccin == 'true'">已打</a-tag>
          <a-tag color="red" v-if="record.pet_vaccin == 'false'">未打</a-tag>
        </template>
        <template #sterilization="{ record }">
          <a-tag color="green" v-if="record.pet_sterilization == 'true'"
            >已绝育</a-tag
          >
          <a-tag color="red" v-if="record.pet_sterilization == 'false'"
            >未绝育</a-tag
          >
        </template>
        <template #repellent="{ record }">
          <a-tag color="green" v-if="record.pet_Insect_repellent == 'true'"
            >已驱虫</a-tag
          >
          <a-tag color="red" v-if="record.pet_Insect_repellent == 'false'"
            >未驱虫</a-tag
          >
        </template>
        <template #images="{ record }">
          <a-image :width="100" :src="record.pet_images" />
        </template>
        <template #operation="{ record }">
          <div
            v-if="
              record.pet_release_status === null &&
              (this.$store.state.userStore.userInfos?.role_id !== 3 ||
                this.$store.state.userStore.userInfos?.status == 'true')
            "
          >
            <a-button
              class="pass-btn"
              type="primary"
              style="margin-right: 10px"
              @click="handleAdopt(record.id)"
              >通过</a-button
            >
            <a-button type="primary" danger @click="handleVeto(record.id)"
              >否决</a-button
            >
          </div>
          <a-tag
            v-else-if="record.pet_release_status == 'true'"
            color="green"
            style="padding: 10px 15px"
            >已通过</a-tag
          >
          <a-tag
            v-else-if="record.pet_release_status == 'false'"
            color="red"
            style="padding: 10px 15px"
            >未通过</a-tag
          >
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>
// 导入组件
import Crumbs from "@/components/Crumbs";
// 导入列配置
import { useColumns } from "./useColumns";
// 导入宠物列表
import { usePetDataList } from "./usePetDataList";
// 导入查询方法
import { useQueryPetList } from "./useQueryPetList";
// 导入审核方法
import { usePetExamine } from "./usePetExamine";

export default {
  name: "",
  components: {
    Crumbs,
  },
  setup() {
    // 配置列
    const { columns } = useColumns();

    // 表格数据
    const { data, tablePagination, getPetDataList } = usePetDataList();

    // 点击切换页面
    const tablePageChange = (pagination) => {
      tablePagination.current = pagination.current;
      tablePagination.pageSize = pagination.pageSize;
      // 重新渲染
      getPetDataList();
    };

    // 查询宠物审核列表
    const { pet_release_status, handleQueryPet } = useQueryPetList(
      data,
      tablePagination
    );

    // 审核处理
    const { handleAdopt, handleVeto } = usePetExamine(getPetDataList);

    return {
      columns, // 列配置
      data, // 数据
      tablePagination, // 分页配置
      tablePageChange, // 切换页面
      pet_release_status, // 审核状态
      handleQueryPet, // 点击查询宠物审核列表
      handleAdopt, // 通过审核
      handleVeto, // 否决审核
    };
  },
};
</script>
<style scoped lang="less">
.query {
  height: 100px;
  margin-bottom: 15px;
  > .ant-row {
    margin-top: 30px;
    line-height: 40px;
  }
  span {
    font-size: 12px;
  }
  .right {
    text-align: right;
    span {
      font-size: 13px;
    }
  }
}
.table {
  .ant-table-wrapper {
    padding: 16px;
  }
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    height: 18px;
    cursor: pointer;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
    border-radius: 20px;
    background: #fdeb71;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: #f8d800;
  }
}
.border {
  border: 1px solid #ddd;
}
.ant-page-header {
  border-bottom: none !important;
}
</style>
